<template>
  <view class="page-container">
    <!-- 搜索区域样式优化 -->
    <view class="search-section">
      <my-picker
        class="search-input"
        label="质检单号"
        v-model="queryCode"
        type="radio"
        filterable
        clearable
        @confirm="selectGRChange"
      />
    </view>

    <!-- Tabs样式优化 -->
    <wd-tabs v-model="tab" @tap="changeTabs" custom-class="custom-tabs">
      <wd-tab title="待检验">
        <view class="content">
          <wd-card v-for="item in GRProductData" :key="item.id" @tap.capture="productDetail(item)">
            <template #title>
              <wd-row>
                <wd-col :span="24" class="text-right">
                  <wd-tag type="warning" custom-class="status-tag" mark v-if="item.status === 0">
                    待检验
                  </wd-tag>
                  <wd-tag type="warning" custom-class="status-tag" mark v-if="item.status === 1">
                    部分检验
                  </wd-tag>
                </wd-col>
              </wd-row>
              <wd-row>
                <wd-col :span="24" class="text-left">
                  <text class="order-number">
                    <text class="order-number-text">质检单:</text>
                    <text class="order-number-text">{{ item.code }}</text>
                  </text>
                </wd-col>
              </wd-row>
            </template>
            <template #default>
              <wd-row>
                <wd-col :span="24" class="text-left">
                  <text class="order-number">
                    <text class="order-number-text">采购单:</text>
                    <text class="order-number-text">{{ item.parentCode }}</text>
                  </text>
                </wd-col>
              </wd-row>
              <wd-cell>
                <template #title>
                  <wd-text text="名称：" size="28rpx"></wd-text>
                  <wd-text :text="item.productName" color="#3e7bfa" size="28rpx"></wd-text>
                </template>
                <template #default>
                  <wd-text text="采购数量：" size="28rpx"></wd-text>

                  <wd-text
                    :text="(item.purchaseQuantity || 0) + '' + formatUnit(item.unit)"
                    color="#3e7bfa"
                    size="28rpx"
                  ></wd-text>
                </template>
              </wd-cell>
            </template>
          </wd-card>

          <wd-loadmore custom-class="loadmore" :state="state" @reload="loadmore" />
        </view>
      </wd-tab>
      <wd-tab title="已检验">
        <view class="content">
          <wd-card v-for="item in GRProductData" :key="item.id">
            <template #title>
              <wd-row>
                <wd-col :span="24" class="text-right">
                  <wd-tag type="warning" custom-class="status-tag" mark v-if="item.status === 2">
                    已检验
                  </wd-tag>
                  <wd-tag type="warning" custom-class="status-tag" mark v-if="item.status === 3">
                    检验拒绝
                  </wd-tag>
                </wd-col>
              </wd-row>
              <wd-row>
                <wd-col :span="24" class="text-left">
                  <text class="order-number">
                    <text class="order-number-text">质检单:</text>
                    <text class="order-number-text">{{ item.code }}</text>
                  </text>
                </wd-col>
              </wd-row>
            </template>
            <template #default>
              <wd-row>
                <wd-col :span="24" class="text-left">
                  <text class="order-number">
                    <text class="order-number-text">采购单:</text>
                    <text class="order-number-text">{{ item.parentCode }}</text>
                  </text>
                </wd-col>
              </wd-row>
              <wd-cell>
                <template #title>
                  <wd-text text="名称：" size="28rpx"></wd-text>
                  <wd-text :text="item.productName" color="#3e7bfa" size="28rpx"></wd-text>
                </template>
                <template #default>
                  <wd-text text="合格数量：" size="28rpx"></wd-text>
                  <wd-text
                    :text="(item.qualifiedQuantity || 0) + '' + formatUnit(item.unit)"
                    color="#3e7bfa"
                    size="28rpx"
                  ></wd-text>
                </template>
              </wd-cell>
            </template>
          </wd-card>

          <wd-loadmore custom-class="loadmore" :state="state" @reload="loadmore" />
        </view>
      </wd-tab>
      <wd-tab title="未通过">
        <view class="content">
          <wd-card v-for="item in GRProductData" :key="item.id">
            <template #title>
              <wd-row>
                <wd-col :span="24" class="text-right">
                  <wd-tag type="warning" custom-class="status-tag" mark v-if="item.status === 3">
                    检验拒绝
                  </wd-tag>
                </wd-col>
              </wd-row>
              <wd-row>
                <wd-col :span="24" class="text-left">
                  <text class="order-number">
                    <text class="order-number-text">质检单:</text>
                    <text class="order-number-text">{{ item.code }}</text>
                  </text>
                </wd-col>
              </wd-row>
            </template>
            <template #default>
              <wd-row>
                <wd-col :span="24" class="text-left">
                  <text class="order-number">
                    <text class="order-number-text">采购单:</text>
                    <text class="order-number-text">{{ item.parentCode }}</text>
                  </text>
                </wd-col>
              </wd-row>
              <wd-cell>
                <template #title>
                  <wd-text text="名称：" size="28rpx"></wd-text>
                  <wd-text :text="item.productName" color="#3e7bfa" size="28rpx"></wd-text>
                </template>
                <template #default>
                  <wd-text text="合格数量：" size="28rpx"></wd-text>
                  <wd-text
                    :text="(item.qualifiedQuantity || 0) + '' + formatUnit(item.unit)"
                    color="#3e7bfa"
                    size="28rpx"
                  ></wd-text>
                </template>
              </wd-cell>
            </template>
          </wd-card>

          <wd-loadmore custom-class="loadmore" :state="state" @reload="loadmore" />
        </view>
      </wd-tab>
    </wd-tabs>
  </view>
  <scan-code @scanSuccess="getScanData" />
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue'
import qualityApi, { QualityData, QualityQueryParams } from '@/api/quality'
import { useMessage, useToast } from 'wot-design-uni'
import scanCode from '@/components/scanCode/scanCode.vue'
import { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import { ScanPatternType } from '@/api/scanCode'
import { formatUnit } from '@/utils/unit'
import myPicker from '@/components/selectPicker/myPicker.vue'
const state = ref<LoadMoreState>('loading')
const queryCode = ref('')

const tab = ref<number>(0)
const toast = useToast()
// 定义每次请求页码

const queryPage = reactive<QualityQueryParams>({
  pageNum: 1,
  pageSize: 10,
  qualityType: 1,
  status: 0,
})
const total = ref<number>(0)
const hasNextPage = ref<boolean>(true)
const GRProductData = ref<QualityData[]>([])

const selectGRChange = (e) => {
  queryPage.code = e.value
  queryCode.value = e.value
  GRProductData.value = []
  getGRList()
}

const selectGRClear = () => {
  queryPage.code = ''
  GRProductData.value = []
  getGRList()
}
// 获取加工信息
const getGRList = () => {
  // 请求接口
  qualityApi
    .getProdReport({
      ...queryPage,
    })
    .then((res: any) => {
      console.log(res, '加工信息')
      total.value = res.data.total
      hasNextPage.value = res.data.hasNextPage
      GRProductData.value.push(...res.data.list)

      state.value = 'finished'
    })
    .catch((err) => {
      state.value = 'error'
      console.log(err)
    })
}

// 触底加载更多
onReachBottom(() => {
  console.log(hasNextPage.value, 'hasNextPage')

  if (hasNextPage.value) {
    state.value = 'loading'
    loadmore()
  } else {
    state.value = 'finished'
  }
})
function loadmore() {
  queryPage.pageNum++
  changeTabs()
  getGRList()
}
// 扫描成功
const getScanData = (e) => {
  // 以PUR开头，长度为20位判断是否是条形码
  if (ScanPatternType.RECEIVING_ORDER.test(e)) {
    queryPage.code = e
    selectGRChange({ value: e })
  } else {
    toast.error('请扫描正确的条形码')
  }
}
// 进入详情页
const productDetail = (item) => {
  uni.navigateTo({
    url: `/pages/QLdetail/index?item=${JSON.stringify(item)}`,
  })
}

// 切换tabs
function changeTabs() {
  console.log(tab.value)
  queryPage.pageNum = 1
  GRProductData.value = []
  state.value = 'loading'
  if (tab.value === 0) {
    queryPage.status = 0
  } else if (tab.value === 1) {
    queryPage.status = 2
  } else if (tab.value === 2) {
    queryPage.status = 3
  }
  getGRList()
}

onLoad(() => {
  queryPage.status = 0
  getGRList()
})

// 下拉刷新
onPullDownRefresh(() => {
  // 修改tabs值
  changeTabs()
})

// 页面隐藏注销事件
onHide(() => {})
</script>
<style lang="scss" scoped>
page {
  height: 100%;
}
// 更新主题变量
$primary-color: #3e7bfa;
$secondary-color: #36b8c2;
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$background-color: #f5f7fa;
$card-background: #ffffff;
$text-primary: #303133;
$text-secondary: #606266;
$border-color: #ebeef5;
$box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);

.page-container {
  padding-bottom: env(safe-area-inset-bottom);
  background-color: $background-color;
}

// 搜索区域优化
.search-section {
  background: linear-gradient(135deg, #f5f7fa 0%, #e9eff5 100%);

  .custom-picker {
    :deep(.wd-picker__field) {
      background: rgba(255, 255, 255, 0.95);
      border-radius: 16rpx;
      box-shadow: 0 8rpx 24rpx rgba(62, 123, 250, 0.12);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

      .wd-input__inner {
        font-size: 30rpx;
        color: #2c3e50;
      }

      .wd-icon-arrow-down {
        color: $primary-color;
      }
    }
  }
}
// Tabs优化
.custom-tabs {
  :deep(.wd-tabs__nav) {
    padding: 0 24rpx;
    background: transparent;

    .wd-tabs__nav-item {
      position: relative;
      padding: 24rpx 0;
      margin: 0 32rpx;
      transition: color 0.3s;

      &::after {
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 6rpx;
        content: '';
        background: $primary-color;
        transition: all 0.3s;
      }

      &.is-active {
        font-weight: 600;
        color: $primary-color;

        &::after {
          left: 0;
          width: 100%;
        }
      }
    }

    .wd-tabs__line {
      display: none;
    }
  }
}

// 卡片样式优化
.wd-card {
  position: relative;
  margin: 24rpx;
  overflow: visible;
  border: none;
  box-shadow: 0 0 10rpx rgba(0, 0, 0, 0.1);
  transition:
    transform 0.3s,
    box-shadow 0.3s;
  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    content: '';
    background: linear-gradient(145deg, #ffffff, #f5f7fa);
    border-radius: 24rpx;
    box-shadow:
      8rpx 8rpx 24rpx #e2e6e9,
      -8rpx -8rpx 24rpx #ffffff;
  }

  &:active {
    box-shadow: 0 8rpx 32rpx rgba(62, 123, 250, 0.1);
    transform: translateY(4rpx);
  }
}

// 订单编号样式
.order-number {
  display: flex;
  align-items: center;
  font-family: DIN Alternate;

  .order-number-text {
    &:first-child {
      margin-right: 16rpx;
      font-size: 28rpx;
      color: $text-secondary;
    }
    &:last-child {
      font-size: 32rpx;
      font-weight: 600;
      color: $primary-color;
      letter-spacing: 1rpx;
    }
  }
}

// 状态标签优化
.status-tag {
  padding: 6rpx 20rpx !important;
  font-size: 24rpx !important;
  font-weight: 500;
  letter-spacing: 1rpx;
  border-radius: 8rpx !important;

  &[type='warning'] {
    background: rgba($warning-color, 0.15) !important;
    border: 1rpx solid rgba($warning-color, 0.3);
  }

  // 已完成状态
  &[v-if*='status === 5'] {
    background: rgba($success-color, 0.15) !important;
    border: 1rpx solid rgba($success-color, 0.3);
  }
}

// 单元格样式优化
.wd-cell {
  overflow: hidden;
  background: rgba($background-color, 0.6);
  border-radius: 16rpx;
  transition: all 0.3s;

  &:active {
    background: rgba($primary-color, 0.05);
  }

  :deep(.wd-text) {
    &[color='#36B8C2'] {
      font-weight: 500;
    }
  }
}

// 删除按钮优化
// 滑动删除按钮优化
.delete-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0 24rpx;
  overflow: hidden;
}

// 加载更多样式
.loadmore {
  :deep(.wd-loadmore__text) {
    position: relative;
    padding-left: 48rpx;
  }
}

@keyframes spin {
  to {
    transform: translateY(-50%) rotate(360deg);
  }
}

// 分割线优化
.wd-divider {
  margin: 24rpx 0;
  background-color: rgba($border-color, 0.6);
}

// 新增动画效果
@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.wd-swipe-action {
  animation: cardEntrance 0.4s ease-out both;
}

// 数量显示优化
.weight-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24rpx;

  background: rgba($primary-color, 0.05);
  border-radius: 16rpx;

  .weight-value {
    font-family: DIN Alternate;
    font-size: 48rpx;
    font-weight: 700;
    color: $primary-color;
  }

  .unit {
    margin-left: 16rpx;
    font-size: 28rpx;
    color: $text-secondary;
  }
}

// 操作按钮组优化
.action-buttons {
  display: flex;
  flex-direction: column;
  gap: 24rpx;

  .action-btn {
    border-radius: 16rpx;
    box-shadow: $box-shadow;
    transition: all 0.3s;

    &:active {
      opacity: 0.9;
      transform: scale(0.98);
    }
  }
}

// 骨架屏加载优化
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton-item {
  margin-bottom: 24rpx;
  background: linear-gradient(
    90deg,
    rgba($background-color, 0.8) 25%,
    rgba($background-color, 0.9) 50%,
    rgba($background-color, 0.8) 75%
  );
  background-size: 200% 100%;
  border-radius: 16rpx;
  animation: shimmer 1.5s infinite;
}
</style>
